$(function(){
    "use strict";
    /*
    * 左右移动图片
    * */
    let page = 1;
    let i = 5;
    let ContentWidth = $('.productionImage_box').width();
    let ListWidth = $('.productionImage_list').width();
    let RightPx = ContentWidth-ListWidth;
    $('.productionImage_list').css('right',RightPx);

   $('.production_image_upload').on('click','img.imageTomove',function (e) {
       e.preventDefault();
       e.stopPropagation();
       let animatedList = $('ul.productionImage_list');
       let imgToMove = $(this).attr('toMove');
       let LEFT = animatedList.css('left');
       let RIGHT = animatedList.css('right');
       let leftLength = LEFT.length;
       let rightLength = RIGHT.length;
       let left =   Number(LEFT.substring(0,leftLength-2));
       let right =  Number(RIGHT.substring(0,rightLength-2));
       let animatedListLength = animatedList.find("li").length;
       if(imgToMove == 'left'){
           if(!animatedList.is(":animated")){
               if(left>=0){
                   animatedList.animate({ left : '0px'}, "slow");
               }
               if(left<0){
                   animatedList.animate({left: left+300+'px'}, "slow");
                   page-=1;
               }
           }
       }
       if(imgToMove == 'right'){
           if(!animatedList.is(":animated")){
               if(page < (animatedListLength/i)+1){
                   animatedList.animate({left: left-300+'px'}, "slow");
                   page+=1;
               }
           }
       }

   })

    /*
     *  下拉框的显示和隐藏
     * */
    $('.select_box').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).children('.select_hidden').toggleClass('active');
        // $(this).children('span').toggleClass('active');
    });
    $(document).click(function(e){
        var $this = $(e.target);
        var hiddenID = $this.attr('class');
        if( hiddenID != 'select_box' || hiddenID != 'select_text' || hiddenID != 'select_hidden'){
            $('.select_box').children('.select_hidden').removeClass('active');
            $('.select_box').children('span').removeClass('active');
        }
    })
    /*
    *  下拉框选择后
    * */
    $('.select_hidden').on('click','li',function(e){
        e.preventDefault();
        e.stopPropagation();
        // console.log($(this).text());
        var text = $(this).text();
        $(this).parent().siblings('span').children('span').text(text);
        $(this).parent().removeClass('active');
        $(this).parent().siblings('.select_text').removeClass('active');
    })
    /*
    * 添加新的标签
    * */
    $('.dataList_addProductTip').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        if($(this).siblings().hasClass('addShow_Input')){
            $(this).siblings('.addShow_Input').addClass('active')
        }else{
            $(this).parent().siblings('.addShow_Input').addClass('active');
        }
    });
    $('.addShow_Input').on('click','span.addbtn',function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).parent().removeClass('active');
        if($(this).hasClass('addbtn_ISOK')){
            var val = $(this).siblings('.addbtn_INPUT').val();
            if($(this).parent().siblings().hasClass('select_box')){
                var appendTip = `
                    <li>${val}</li>
                `
                $(this).parent().siblings().children('.select_hidden').append(appendTip);
            }else{
                var appendTip = `<li class="dataList_productTip">
                                <span class="dataList_productTipName">${val}</span>
                                <i class="dataList_productTipLogo"></i>
                            </li>`
                $(this).parent().parent().prepend(appendTip)
            }
        }
    })
    $('.dataList_productTipList').on('click','.dataList_productTipLogo',function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).parent().remove();
    })
    $('#hotTip_dataList_productTipList').on('click','li',function(e){
        e.preventDefault();
        e.stopPropagation();
        var text = $(this).children('span').text();
        var appendTip = `<li class="dataList_productTip">
                                <span class="dataList_productTipName">${text}</span>
                                <i class="dataList_productTipLogo"></i>
                            </li>`
        $(this).parent().siblings('ul').prepend(appendTip);
    })
    /*
    * 打赏设置
    * */
    $('.dataList_setUpPayList').on('click','li',function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).children('i').removeClass('closePay').addClass('openPay');
        $(this).siblings().children('i').removeClass('openPay').addClass('closePay');
    })
    /*
    * 自定义设置
    * */
    $('.addClassify_logo').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        var addinputBox = `
                    <li>
                        <input class="addClassify_input addClassify_inputName" type="text" placeholder="自定义名称">
                        <input class="addClassify_input addClassify_inputMain" type="text" placeholder="请输入自定义相关信息">
                        <i></i>
                    </li>
        `
        $('.addClassify_input_list').prepend(addinputBox);
    })
    $('.addClassify_input_list').on('click','i',function(e){
        e.preventDefault();
        e.stopPropagation();
        $(this).parent().remove();
    })

    /*
    * ************************图片处理*********************
    * */
    var IMG_arr = [];
    /*
    * 图片拖拽上传
    * */
    toMove()
    var box=document.getElementById('productionImage_list');
    box.ondragover=function (e){
        e.preventDefault();
    }
    box.ondrop=function (e){
        e.preventDefault();
        var f=e.dataTransfer.files;//获取到第一个上传的文件对象
        for(var i=0;i<f.length;i++){
            var fr=new FileReader();
            fr.readAsDataURL(f[i]);//把上传的文件对象转换成url
            fr.onload=function (e){
                var Url=this.result;//上传文件的URL
                let frSrc = Url.indexOf('4');
                let frimg = Url.substring(frSrc + 2);
                let li = `<li class="productionImage_first">
                            <img class='productionImage' src="${Url}" alt="">
                            <i class="icon iconfont icon-guanbiicon IMGicon"></i>
                            <p class="productionImage_title">封面图片</p>
                          </li>`
                $('.upload_btn').before(li);
                // indexIMG()
                IMG_arr.unshift(frimg);
                $('.closeBtn').addClass('show');
            }
        }
        toMove();
    }

    /*
    *  点击上传图片显示
    * */

    $('#img_upload_btn').on('change',function(){
        let data = this.files;
        for(var i =0;i<data.length;i++){
            let imgReader = new FileReader();
            imgReader.readAsDataURL(data[i]);
            imgReader.onload = function (e){
                let url = this.result;//上传文件的URL
                let img_btnSrc = url.indexOf('4');
                let img = url.substring(img_btnSrc + 2);
                let li = `<li class="productionImage_first">
                            <img class='productionImage' src="${url}" alt="">
                            <i class="icon iconfont icon-guanbiicon IMGicon"></i>
                            <p class="productionImage_title">封面图片</p>
                          </li>`
                $('.upload_btn').before(li);
                IMG_arr.unshift(img);
                $('.closeBtn').addClass('show')
            }
        }
    })

    /*
    *   删除图片
    * */
    $('.zk_production_image_list').on('click','i.IMGicon',function(e){
        e.preventDefault();
        IMG_arr.splice($(this).parent().index(),1);
        $(this).parent().remove();
    })


    /*
    * 图片点击设置封面
    * */
    // $('#zk').on('click','li',function(e){
    //     if($(this).hasClass('productionImage_first')){
    //         e.preventDefault();
    //         e.stopPropagation();
    //         $(this).children('p').addClass('active');
    //         $(this).siblings().children('p').removeClass('active');
    //     }
    // })
    /*
    * 切换封面图 图片展示框 展开/收起
    * */
    $('.production_image_title').on('click','a',function(e){
        e.preventDefault();
        e.stopPropagation();
        if($(this).text() === '收起'){
            // indexIMG();
            $('#productionImage_list').addClass('active');
        }
        if($(this).text() === '展开'){
            $('#productionImage_list').removeClass('active');
        }
        $(this).removeClass('active').siblings('a').addClass('active');
    })
    /*
    * 图片拖拽调换位置
    * */
    function toMove(){
        var $srcImgDiv = null;
        // // 正在拖动的图片的父级DIV
        // $(".productionImage").bind("dragstart", function() {// 开始拖动
        //     console.log(1);
        //     $srcImgDiv = $(this).parent();
        // });
        // $(".productionImage").bind("dragover", function(event) {// 拖动到.productionImage上方时触发的事件
        //     event.preventDefault();// 必须通过event.preventDefault()来设置允许拖放
        // });
        // $(".productionImage").bind("drop", function(event) {// 结束拖动放开鼠标的事件
        //     event.preventDefault();
        //     if($srcImgDiv[0] != $(this).parent()[0]) {//如果拖动和被拖动不一样
        //         $(this).parent().before($srcImgDiv);//就在前面插入拖动过来的图片
        //     }
        // });
        // 正在拖动的图片的父级DIV
        $('.zk_production_image_list').on('dragstart','.productionImage',function(){// 开始拖动
            $srcImgDiv = $(this).parent();
        })
        $('.zk_production_image_list').on('dragover','.productionImage',function(e){// 拖动到.productionImage上方时触发的事件
            e.preventDefault();// 必须通过e.preventDefault()来设置允许拖放
        })
        $('.zk_production_image_list').on('drop','.productionImage',function(e){// 结束拖动放开鼠标的事件
            e.preventDefault();
            if($srcImgDiv[0] != $(this).parent()[0]) {//如果拖动和被拖动不一样
                $(this).parent().before($srcImgDiv);//就在前面插入拖动过来的图片
            }
        })
    }
    /*
    * 永远设置第一张为封面图
    * */
    // function indexIMG(){
    //     console.log(1)
    //     if(!$('#productionImage_list').children('li:first-child').children('p').hasClass('active')){
    //         $('#productionImage_list').children('li:first-child').children('p').addClass('active');
    //         $('#productionImage_list').children('li').children('p.active').parent().siblings().children('p.active').removeClass('active');
    //     }else{
    //         return
    //     }
    // }

});





